

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 禁用电话号码检测功能，禁止对数字随便可以拨号 -->
		<meta name="format-detection" content="telephone=no">
		<!-- 禁用地址检测功能，禁止跳转到地图 -->
		<meta name="format-detection" content="address=no">
		<!-- 在苹果设备上以全屏方式打开本网页 -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<!-- 设置在苹果设备上状态的颜色，默认白色，要设置成什么颜色以Web颜色的风格而定 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="white">
		<title>微信商城-首页</title>
		<link rel="stylesheet" type="text/css" href="vendor/normalize.min.css" />
		<!-- 可选 -->
		<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css" />
		<!-- 可选 -->
		<link rel="stylesheet" href="vendor/swiper/swiper.min.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/index.css" />
		<!-- 苹果设备在桌面上生成的快捷图标 -->
		<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
		<link rel="icon" href="img/favicon.ico">
	</head>

	<body>
		<header class="header-wrapper">
			<ul class="header-list">
				<li class="list-active">
					<a href="#">
						<i class="fa fa-2x fa-home"></i>
						<p>首页</p>
					</a>
				</li>
				<li>
					<a href="productlist.jsp">
						<i class="fa fa-2x fa-th"></i>
						<p>商品分类</p>
					</a>
				</li>
				<li>
					<a href="shopcar.html">
						<i class="fa fa-2x fa-shopping-cart"></i>
						<p>购物车</p>
					</a>
				</li>
				<li>
					<a href="userinfo.html">
						<i class="fa fa-2x fa-user"></i>
						<p>用户中心</p>
					</a>
				</li>
			</ul>
		</header>

		<section class="index-banner swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="img/1.jpg" />
					<div class="slide-layer">
						<div class="layer-inner">
							<p>微信价<span>600元</span></p>
							<p>微信商城</p>
							<div class="inner-right">
								<a href="info.jsp">立即购买</a>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<img src="img/2.jpg" />
					<div class="slide-layer">
						<div class="layer-inner">
							<p>微信价<span>600元</span></p>
							<p>微信商城</p>
							<div class="inner-right">
								<a href="info.jsp">立即购买</a>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<img src="img/3.jpg" />
					<div class="slide-layer">
						<div class="layer-inner">
							<p>微信价<span>600元</span></p>
							<p>微信商城</p>
							<div class="inner-right">
								<a href="info.jsp">立即购买</a>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<img src="img/4.jpg" />
					<div class="slide-layer">
						<div class="layer-inner">
							<p>微信价<span>600元</span></p>
							<p>微信商城</p>
							<div class="inner-right">
								<a href="info.jsp">立即购买</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="index-main">
			<a href="info.jsp">
				<div class="main-list">
					<img src="img/product1.png" />
					<div class="trangle-exclusive">
						<div class="trangle-text">
							<span>专属</span>
						</div>
					</div>

					<div class="list-right">
						<p class="title">广联达变更算量</p>
						<p class="details">菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识</p>
						<p class="price">价格:<span>￥235</span></p>
					</div>
				</div>
			</a>
			<a href="info.jsp">
				<div class="main-list">
					<img src="img/product1.png" />
					<div class="trangle-hot">
						<div class="trangle-text">
							<span>热销</span>
						</div>
					</div>

					<div class="list-right">
						<p class="title">广联达变更算量</p>
						<p class="details">菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识</p>
						<p class="price">价格:<span>￥235</span></p>
					</div>
				</div>
			</a>
			<a href="info.jsp">
				<div class="main-list">
					<img src="img/product1.png" />
					<div class="trangle-limit">
						<div class="trangle-text">
							<span>限购</span>
						</div>
					</div>

					<div class="list-right">
						<p class="title">广联达变更算量</p>
						<p class="details">菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识</p>
						<p class="price">价格:<span>￥235</span></p>
					</div>
				</div>
			</a>
			<a href="info.jsp">
				<div class="main-list">
					<img src="img/product1.png" />
					<div class="trangle-exclusive">
						<div class="trangle-text">
							<span>专属</span>
						</div>
					</div>

					<div class="list-right">
						<p class="title">广联达变更算量</p>
						<p class="details">菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识</p>
						<p class="price">价格:<span>￥235</span></p>
					</div>
				</div>
			</a>
			<a href="info.jsp">
				<div class="main-list">
					<img src="img/product1.png" />
					<div class="trangle-hot">
						<div class="trangle-text">
							<span>热销</span>
						</div>
					</div>

					<div class="list-right">
						<p class="title">广联达变更算量</p>
						<p class="details">菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识</p>
						<p class="price">价格:<span>￥235</span></p>
					</div>
				</div>
			</a>
			<a href="info.jsp">
				<div class="main-list">
					<img src="img/product1.png" />
					<div class="trangle-limit">
						<div class="trangle-text">
							<span>限购</span>
						</div>
					</div>

					<div class="list-right">
						<p class="title">广联达变更算量</p>
						<p class="details">菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识</p>
						<p class="price">价格:<span>￥235</span></p>
					</div>
				</div>
			</a>
			<a href="info.jsp">
				<div class="main-list">
					<img src="img/product1.png" />
					<div class="trangle-exclusive">
						<div class="trangle-text">
							<span>专属</span>
						</div>
					</div>

					<div class="list-right">
						<p class="title">广联达变更算量</p>
						<p class="details">菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识</p>
						<p class="price">价格:<span>￥235</span></p>
					</div>
				</div>
			</a>
			<a href="info.jsp">
				<div class="main-list">
					<img src="img/product1.png" />
					<div class="trangle-hot">
						<div class="trangle-text">
							<span>热销</span>
						</div>
					</div>

					<div class="list-right">
						<p class="title">广联达变更算量</p>
						<p class="details">菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识</p>
						<p class="price">价格:<span>￥235</span></p>
					</div>
				</div>
			</a>
			<a href="info.jsp">
				<div class="main-list">
					<img src="img/product1.png" />
					<div class="trangle-limit">
						<div class="trangle-text">
							<span>限购</span>
						</div>
					</div>

					<div class="list-right">
						<p class="title">广联达变更算量</p>
						<p class="details">菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识</p>
						<p class="price">价格:<span>￥235</span></p>
					</div>
				</div>
			</a>
			<a href="info.jsp">
				<div class="main-list">
					<img src="img/product1.png" />
					<div class="trangle-exclusive">
						<div class="trangle-text">
							<span>专属</span>
						</div>
					</div>

					<div class="list-right">
						<p class="title">广联达变更算量</p>
						<p class="details">菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识</p>
						<p class="price">价格:<span>￥235</span></p>
					</div>
				</div>
			</a>
			<a href="info.jsp">
				<div class="main-list">
					<img src="img/product1.png" />
					<div class="trangle-hot">
						<div class="trangle-text">
							<span>热销</span>
						</div>
					</div>

					<div class="list-right">
						<p class="title">广联达变更算量</p>
						<p class="details">菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识</p>
						<p class="price">价格:<span>￥235</span></p>
					</div>
				</div>
			</a>
			<a href="info.jsp">
				<div class="main-list">
					<img src="img/product1.png" />
					<div class="trangle-limit">
						<div class="trangle-text">
							<span>限购</span>
						</div>
					</div>

					<div class="list-right">
						<p class="title">广联达变更算量</p>
						<p class="details">菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识</p>
						<p class="price">价格:<span>￥235</span></p>
					</div>
				</div>
			</a>
		</section>

		<script src="js/resize.js"></script>
		<script src="vendor/zepto.min.js"></script>
		<script src="vendor/swiper/swiper-3.4.0.jquery.min.js"></script>
		<script src="vendor/swiper/swiper.animate1.0.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				var mySwiper = new Swiper('.swiper-container', {
					loop: true,
					autoplay: 5000,
				});
			})
		</script>
	</body>

</html>